/*
 * main_banner.css — homepage hero
 * View: Modules/Gcustom/Views/main_banner.twig
 *
 * The hero band is a composed surface the theme does not ship: a brand-tinted
 * panel with a decorative glow and a framed illustration. Every value here
 * resolves through the theme tokens — typography, chip, icon box, buttons and
 * the illustration frame come from Gtheme.
 */

/* ---- The band ---------------------------------------------------------- */
.gcustom-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-primary-soft) 100%);
    box-shadow: var(--shadow-sm);
}

/* Decorative glow, top-left. Purely presentational. */
.gcustom-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -15%;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* Content paints above the glow. */
.gcustom-hero__content {
    position: relative;
}

/* Feature-point copy: allowed to shrink so the text wraps inside its row. */
.gcustom-hero__copy {
    min-width: 0;
}

/* One feature point: fixed icon box + a copy that wraps beside it (never
   dropping below the icon). */
.gcustom-hero__point {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.6rem;
}

/* ---- Illustration ------------------------------------------------------
   The artwork ships on a flat white ground. `multiply` turns that white into
   the band itself, so the illustration sits *in* the panel instead of inside a
   white box dropped on top of it — no frame, no visible edge. */
.gcustom-hero__visual {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* Stacked above the copy below `lg`, where the column is full width — keep the
   square illustration from becoming the whole screen. */
@media (max-width: 991.98px) {
    .gcustom-hero__visual {
        max-width: 20rem;
    }
}